<template>
  <view class="page-main">
    <view class="plan-name-section" style="background-color: #000; color: #fff; padding: 20rpx;border-radius: 20rpx;">
      <text class="input-label">计划名称：</text>
      <text>{{ planName }}</text>
    </view>
    <div style="padding: 30rpx">
      <div v-for="(item, index) in dataList" :key="index">
        <view class="f ac xb mt20r">
          <view
            class="title f ac xb rds20r"
            style="background-color: #000; color: #fff; padding: 20rpx;width: 100%;"
          >
            <div>{{ item.purpose }}</div>
          </view>
        </view>
        <div v-if="item.exercises && item.exercises.length > 0">
          <view
            v-for="(exercise, eIndex) in item.exercises"
            :key="eIndex"
            class="f ac xb mt30r plan chooseitem mt20r"
          >
            <view class="exercise-name tc" style="flex: 1; text-align: center;">
              <text class="tc">{{ exercise.name }}</text>
            </view>
            <view class="f ac xc tc" style="flex: 1; text-align: center;">
              <div  class="tc">{{ exercise.sets }} 组 X{{ exercise.reps.count }}{{ getUnitLabel(exercise.reps.unit) }}</div>
            </view>
        
            <view class="f ac xc tc" style="flex: 1; text-align: center;">
              <div  class="tc">{{ exercise.weighs }}</div>
            </view>
          </view>
        </div>
        <div v-else class="f ac xc mt30r plan chooseitem mt20r">暂无动作</div>
      </div>
    </div>
  </view>
</template>

<script>
import { planDetails } from "../../api/fit";
export default {
  data() {
    return {
      id: 0,
      planName: "",
      dataList: [],
      unitOptions: [
        { label: "次", value: "c" },
        { label: "秒", value: "s" },
        { label: "分", value: "m" },
      ],
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await planDetails(this.id);
      this.dataList = res.data.nodes;
      this.planName = res.data.planName;
    },
    getUnitLabel(unit) {
      const option = this.unitOptions.find((opt) => opt.value === unit);
      return option ? option.label : "";
    },
  },
};
</script>

<style lang="scss">
.chooseitem {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #ebebeb;
  border-radius: 20rpx;
  background-color: #fff;
}

.page-main {
  padding: 20rpx;
  background-color: #efefef;
}

.plan-name-section {
  padding: 30rpx;
  background-color: #000;
  color: #fff;
  margin-bottom: 20rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
}

.input-label {
  font-size: 28rpx;
  color: #fff;
  margin-right: 20rpx;
  white-space: nowrap;
}

.exercise-name {
  position: relative;
  min-width: 200rpx;
}
</style>
